import './index.less'
import { useState } from 'react'
import { Spin } from 'antd'

/**
 *
 * @param isTab 判断是否开启 tab , 会覆盖 rightContent
 * @param tabClick tab 点击事件 , 会返回当前点击的名称
 * @param margin 添加盒子的 margin , 格式为 :         margin={[0, 0, 20, 0]}
 * @param width 宽度, 需要添加单位
 * @param height 高度, 需要添加单位
 * @param leftContent 左侧内容, 里面有 subTitle 和 title
 * @param rightContent 右内容, 里面有 subTitle 和 title
 * @param children  盒子里面的内容
 * @param loading 是否显示loading
 * @returns {JSX.Element}
 * @constructor
 */
const HomeCard = ({ isTab, margin, width, height, leftContent, rightContent, children, tabClick, loading = false }) => {

  const [tabActive, setTabActive] = useState('近一周')
  const [tabIndex, setTabIndex] = useState(0)

  const handleChangeTab = (item, index) => {
    setTabActive(item)
    setTabIndex(index)
    tabClick && tabClick(item)
  }

  return (
    <div className='home_card' style={{
      'width': width,
      'margin': margin && margin?.join('px ') + 'px'
    }}>
      {
        leftContent || rightContent ?
          <div
            className='home_card_header'
            style={{ 'borderBottom': leftContent || rightContent ? '1px solid #E5E5E5' : 'none' }}>
            {
              leftContent &&
              <div className='home_card_left'>
                {leftContent.subTitle && <div className='home_card_sub_title'>{leftContent.subTitle}</div>}
                {leftContent.title && <div className='home_card_title'>{leftContent.title}</div>}
              </div>
            }

            {
              rightContent && !isTab &&
              <div className='home_card_right'>
                {rightContent.subTitle && <div className='home_card_sub_title'>{rightContent.subTitle}</div>}
                {rightContent.title && <div className='home_card_title'>{rightContent.title}</div>}
              </div>
            }

            {
              isTab &&
              <div className='home_card_tab'>
                <div className='home_card_content'>
                  {
                    ['近一周', '近一月', '近一年'].map((item, index) => {
                      return (
                        <div
                          key={item}
                          className={`home_card_tab_item ${tabActive === item ? 'home_card_tab_item_active' : ''}`}
                          onClick={() => handleChangeTab(item, index)}>
                          {item}
                        </div>
                      )
                    })
                  }
                </div>
                <div className='home_card_active' style={{ left: tabIndex * 80 + 'px' }}>
                  <div className='home_card_item_active'></div>
                </div>
              </div>
            }

          </div> : null
      }
      {
        <>
          <div className='spin_content'
               style={{ 'display': loading ? 'flex' : 'none' }}>
            <Spin tip='数据加载中' size='small' />
          </div>
          <div
            className='home_card_content'
            style={{
              // 'paddingTop': leftContent || rightContent ? '10px' : 'none',
              'height': height
            }}>
            {children}
          </div>
        </>
      }
    </div>
  )
}
export default HomeCard